(function () {
  let progresshtml = document.querySelector('.progress-HTML')
  let progressphp = document.querySelector('.progress-PHP')
  let progresscss = document.querySelector('.progress-CSS')
  let progresswordpress = document.querySelector('.progress-WC')
  let progressjavascript = document.querySelector('.progress-JS')
  let progressphotoshop = document.querySelector('.progress-PHOTOSHOP')

  let HTMLbar = document.querySelector('.HTMLbar')
  let PHPbar = document.querySelector('.PHPbar')
  let CSSbar = document.querySelector('.CSSbar')
  let WCbar = document.querySelector('.WCbar')
  let JSbar = document.querySelector('.JSbar')
  let PHOTOSHOPbar = document.querySelector('.PHOTOSHOPbar')
  let count = 0

  let timerHtml = setInterval(() => {
    count++;
    progresshtml.innerHTML = count + '%';
    HTMLbar.style.width = count + '%';
    if (count >= 100) {
      clearInterval(timerHtml);
    };
  }, 10);
  let timerPhp = setInterval(() => {
    count++;
    progressphp.innerHTML = count + '%';
    PHPbar.style.width = count + '%';
    if (count >= 70) {
      clearInterval(timerPhp);
    };
  }, 50);
  let timerCss = setInterval(() => {
    count++;
    progresscss.innerHTML = count + '%';
    CSSbar.style.width = count + '%';
    if (count >= 70) {
      clearInterval(timerCss);
    };
  }, 50);
  let timerWordpress = setInterval(() => {
    count++;
    progresswordpress.innerHTML = count + '%';
    WCbar.style.width = count + '%';
    if (count >= 50) {
      clearInterval(timerWordpress);
    };
  }, 50);
  let timerJavascript = setInterval(() => {
    count++;
    progressjavascript.innerHTML = count + '%';
    JSbar.style.width = count + '%';
    if (count >= 60) {
      clearInterval(timerJavascript);
    };
  }, 50);
  let timerPhotoshop = setInterval(() => {
    count++;
    progressphotoshop.innerHTML = count + '%';
    PHOTOSHOPbar.style.width = count + '%';
    if (count >= 70) {
      clearInterval(timerPhotoshop);
    };
  }, 50);

})();